<template>
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>会议列表</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="handleCreate">预约会议</el-button>
        </div>
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="加载中..."
          border
          fit
          highlight-current-row
        >
          <el-table-column align="center" label="ID" width="80">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column width="180px" align="center" label="会议时间">
            <template slot-scope="scope">
              <span>{{ scope.row.meetingTime }}</span>
            </template>
          </el-table-column>
          <el-table-column width="120px" align="center" label="会议室">
            <template slot-scope="scope">
              {{ scope.row.room }}
            </template>
          </el-table-column>
          <el-table-column width="150px" label="主题">
            <template slot-scope="scope">
              {{ scope.row.title }}
            </template>
          </el-table-column>
          <el-table-column width="120px" align="center" label="组织者">
            <template slot-scope="scope">
              {{ scope.row.organizer }}
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" label="状态" width="110">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleView(scope.row)"
              >
                查看
              </el-button>
              <el-button
                v-if="scope.row.status==='未开始'"
                size="mini"
                type="primary"
                @click="handleEdit(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                v-if="scope.row.status==='未开始'"
                size="mini"
                type="danger"
                @click="handleCancel(scope.row)"
              >
                取消
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  // import { fetchList, cancelMeeting } from '@/api/meeting'
  
  export default {
    name: 'MeetingList',
    filters: {
      statusFilter(status) {
        const statusMap = {
          '未开始': 'primary',
          '进行中': 'success',
          '已结束': 'info',
          '已取消': 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        list: [
          {
            id: 1,
            title: '产品研发会议',
            organizer: '张三',
            meetingTime: '2023-01-10 10:00-12:00',
            room: '会议室A',
            status: '未开始'
          },
          {
            id: 2,
            title: '市场营销策略会议',
            organizer: '李四',
            meetingTime: '2023-01-11 14:00-16:00',
            room: '会议室B',
            status: '未开始'
          },
          {
            id: 3,
            title: '年度总结会议',
            organizer: '王五',
            meetingTime: '2023-01-05 09:00-11:00',
            room: '大会议室',
            status: '已结束'
          },
          {
            id: 4,
            title: '部门协调会议',
            organizer: '赵六',
            meetingTime: '2023-01-08 15:00-16:00',
            room: '会议室C',
            status: '已取消'
          }
        ],
        total: 4,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 10
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        // 模拟API调用
        setTimeout(() => {
          this.listLoading = false
        }, 1000)
        
        // 实际项目中应该调用API
        // fetchList(this.listQuery).then(response => {
        //   this.list = response.data.items
        //   this.total = response.data.total
        //   this.listLoading = false
        // })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
      handleCreate() {
        this.$router.push('/meeting/create')
      },
      handleEdit(row) {
        this.$router.push(`/meeting/edit/${row.id}`)
      },
      handleView(row) {
        this.$router.push(`/meeting/view/${row.id}`)
      },
      handleCancel(row) {
        this.$confirm('确认取消该会议?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 模拟取消操作
          this.$message({
            type: 'success',
            message: '取消成功!'
          })
          // 更新状态
          const index = this.list.findIndex(item => item.id === row.id)
          if (index !== -1) {
            this.list[index].status = '已取消'
          }
          
          // 实际项目中应该调用API
          // cancelMeeting(row.id).then(() => {
          //   this.$message({
          //     type: 'success',
          //     message: '取消成功!'
          //   })
          //   this.getList()
          // })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      }
    }
  }
  </script>
  
  <style scoped>
  .pagination-container {
    margin-top: 30px;
  }
  </style>